<template>
  <el-row align="middle">
    <el-col :span="12">
      <div  class="mediatitle">
        视频介质
      </div>
    </el-col>
    <el-col :span="12">
      <div align="right" v-if="seriesinfo.corpid == currentCorpId">
        <span v-if="isedit">
          <el-button type="primary" size="mini" @click="handleSeriesRelVideo">
            <el-icon>
              <plus />
            </el-icon>
            添加视频
          </el-button>
          <el-button type="default" size="mini" @click="handleCancelEditVideo">取消编辑</el-button>
        </span>
        <span v-else>
          <el-button type="primary" size="mini" @click="handleEditVideo">
            <el-icon>
              <edit />
            </el-icon>
            编辑
          </el-button>
        </span>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24" v-if="videoList.length > 0">
      <ul class="mediainfo" v-for="video in videoList" :key="video.videoid">
        <li style="width: 100%">
          <span>视频文件：</span>
          <span>{{video.name}}</span>
        </li>
        <li>
          <span>视频播放地址：</span>
          <span>{{video.playurl}}</span>
        </li>
        <li>
          <span>视频FID：</span>
          <span> {{video.sourceid}}</span>
        </li>
      </ul>
    </el-col>
    <el-col :span="24" v-else>
      <el-empty />
    </el-col>
  </el-row>
  <rel-video-medium
          ref="relVideoMediumRef"
          :dialog-rel-video-form-data="relVideoFormData"
          dialog-rel-video-mediatype="series"
          :dialog-rel-video-title="relVideoTitle"
          :dialog-rel-video-visible="relVideoVisible"
          @handleCancelVideoDialog="handleCancelVideoDialog"
          @handleVideoPlay="handleVideoPlay"
          @reloadMediaData="getVideoDataList"
  />
</template>

<script>
  import {Edit, Plus} from '@element-plus/icons'
  import {ref, reactive, nextTick} from 'vue'
  import RelVideoMedium from "../../Medium/RelVideoMedium";
  import {seriesRefVideos} from "@/api/media/media";

  export default {
    name: "VodVideoMedium",
    components: {Edit, Plus, RelVideoMedium},
    props: {
      seriesinfo: {
        type: Object
      },
      currentCorpId: {
        type: Number
      }
    },
    emits: ['handleVideoPlay'],
    setup(props, context) {
      const isedit = ref(false)
      const videoList = ref([])
      /** 关联视频介质相关参数开始 **/
      const relVideoVisible = ref(false)
      const relVideoTitle = ref('')
      const relVideoFormData = reactive({
        seriesid: undefined,
        groupid: undefined,
        datas: []
      })
      const relVideoMediumRef = ref(null)
      /** 关联视频介质相关参数结束 **/

      const handleEditVideo = () => {
        isedit.value = true
      }
      const handleCancelEditVideo = () => {
        isedit.value = false
      }
      const handleSeriesRelVideo = () => {
        relVideoFormData.seriesid = props.seriesinfo.seriesid
        relVideoFormData.groupid = props.seriesinfo.groupid
        relVideoFormData.datas = []
        relVideoTitle.value = props.seriesinfo.name + ' 关联视频'
        relVideoVisible.value = true
        nextTick(() => {
          relVideoMediumRef.value.init()
        })
      }
      const handleCancelVideoDialog = () => {
        relVideoVisible.value = false
      }
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }
      const getVideoDataList = () => {
        seriesRefVideos({seriesid: props.seriesinfo.seriesid}).then(response => {
          if (response.errcode == 0) {
            videoList.value = response.data
          }
        })
      }
      const init = () => {
        if (props.seriesinfo && props.seriesinfo.videos && props.seriesinfo.videos.length > 0) {
          videoList.value = props.seriesinfo.videos
        }
        getVideoDataList()
      }

      return {
        isedit,
        handleEditVideo,
        handleCancelEditVideo,
        handleSeriesRelVideo,
        relVideoTitle,
        relVideoFormData,
        relVideoVisible,
        handleCancelVideoDialog,
        handleVideoPlay,
        getVideoDataList,
        videoList,
        init,
        relVideoMediumRef
      }
    }
  }
</script>

<style scoped>

</style>
